/*@import url("https://fonts.googleapis.com/css?family=Roboto+Slab");*/
*, *:before, *:after {
  /*font-family: "Roboto Slab", serif;*/
  font-weight: 200;
  letter-spacing: 0.5px;
  margin: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #454344;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffe4b3;
}

.pic {
  width: 100%;
  height: 240px;
  background-color: #ea786c;
  /*border-radius: 10px;*/
  /*position: relative;*/
  overflow: auto;
}
.pic .bottom {
  width: 100%;
  height: 240px;
  background-color: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.pic .bottom .sea {
  width: 100%;
  height: 50%;
  background-color: #307a95;
  bottom: 0;
  position: relative;
  border-radius: 0 0 10px 10px;
}
.pic .bottom .reflection {
  position: absolute;
  left: 120px;
  top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pic .bottom .reflection .cir1, .pic .bottom .reflection .cir2, .pic .bottom .reflection .cir3, .pic .bottom .reflection .cir4 {
  margin-top: -1px;
}
.pic .bottom .reflection .cir1 {
  width: 110px;
  height: 15px;
  background-color: #3a8599;
  border-radius: 100px/20px;
}
.pic .bottom .reflection .cir2 {
  width: 75px;
  height: 10px;
  background-color: #3a8599;
  border-radius: 100px/20px;
}
.pic .bottom .reflection .cir3 {
  width: 50px;
  height: 10px;
  background-color: #3a8599;
  border-radius: 100px/20px;
}
.pic .bottom .reflection .cir4 {
  width: 30px;
  height: 6px;
  background-color: #3a8599;
  border-radius: 100px/20px;
}
.pic .bottom .boat1, .pic .bottom .boat2 {
  width: auto;
  height: auto;
  background-color: none;
  position: relative;
  margin-top: 45px;
}
.pic .bottom .boat1 .boattop, .pic .bottom .boat2 .boattop {
  width: 0px;
  height: 0px;
  background-color: none;
  border-left: solid 15px transparent;
  border-right: solid 20px #ffe4b3;
  border-bottom: solid 15px transparent;
  border-top: solid 15px transparent;
}
.pic .bottom .boat1 .boatbot, .pic .bottom .boat2 .boatbot {
  width: 40px;
  height: 0;
  border-top: 12px solid #1f5a68;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  left: 10px;
  top: 22px;
}
.pic .top {
  position: absolute;
  left: 40%;
  top: 40px;
  width: 100%;
  height: 100%;
  background-color: none;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}
.pic .top .text {
  width: 100%;
  height: 100%;
  background-color: none;
  padding-left: 40px;
  padding-top: 50px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.pic .top .text .after {
  width: 105px;
  height: 10%;
  background-color: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: initial;
  top: initial;
  left: 100px;
  top: 75px;
}
.pic .top .text .after .line {
  width: 85px;
  height: 2.2px;
  background-color: #ffe4b3;
}
.pic .top .text .after .dot {
  width: 5px;
  height: 5px;
  background-color: #ffe4b3;
  border-radius: 2.5px;
}
.pic .top .house {
  width: 50%;
  height: 100%;
  background-color: none;
  position: relative;
  right: 0;
  bottom: 0;
}
.pic .top .house .roof {
  width: 200px;
  height: 0;
  border-bottom: 70px solid #454344;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  position: absolute;
  left: initial;
  top: initial;
  right: 0;
  top: 21%;
}
.pic .top .house .roofMom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  height: 5px;
  background-color: none;
  position: absolute;
  left: 0px;
  top: -7px;
}
.pic .top .house .roofMom .roofcir {
  width: 10.7px;
  height: 10.7px;
  background-color: #307a95;
  border-radius: 5.4px;
}
.pic .top .house .roof:before {
  content: " ";
  width: auto;
  height: 7px;
  background-color: #307a95;
  display: block;
  margin-top: -4px;
}
.pic .top .house .chimney {
  width: auto;
  height: 100px;
  background-color: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 12px;
  top: -55px;
}
.pic .top .house .chimneySon {
  width: 30px;
  height: 12px;
  background-color: #f2b191;
  display: flex;
  justify-content: space-around;
  align-items: space-around;
  position: relative;
}
.pic .top .house .chimneySon .chimneyL, .pic .top .house .chimneySon .chimneyR {
  width: 6px;
  height: 12px;
  background-color: #454344;
  position: absolute;
  left: 5px;
  top: -12px;
}
.pic .top .house .chimneySon .chimneyR {
  position: absolute;
  left: 18px;
  top: -12px;
}
.pic .top .house .chimneySon:after {
  content: " ";
  width: 30px;
  height: 3px;
  background-color: #e27560;
  position: absolute;
  left: 0px;
  top: 10px;
}
.pic .top .house .chimneyMom {
  width: 25px;
  height: 45px;
  background-color: #f2b191;
}
.pic .top .house .building {
  width: 200px;
  height: 65%;
  background-color: #f2b191;
  position: absolute;
  left: initial;
  top: initial;
  right: 0;
  bottom: 0;
  border-radius: 0 0 10px 0;
}
.pic .top .house .building .rowdec {
  width: auto;
  height: auto;
  background-color: none;
  margin-left: -2px;
}
.pic .top .house .building .rowdec .rowdec1, .pic .top .house .building .rowdec .rowdec2, .pic .top .house .building .rowdec .rowdec3 {
  width: 205px;
  height: 5px;
  background-color: #ffc1a6;
  position: absolute;
  box-shadow: 0px 2px rgba(242, 128, 100, 0.2);
}
.pic .top .house .building .rowdec .rowdec1 {
  margin: 90px 0px;
}
.pic .top .house .building .rowdec .rowdec2 {
  margin: 180px 0px;
}
.pic .top .house .building .rowdec .rowdec3 {
  margin: 270px 0px 0px 0px;
}
.pic .top .house .building .decor {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.pic .top .house .building .decor .decorL, .pic .top .house .building .decor .decorR {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-direction: column;
  width: auto;
  height: 275px;
  background-color: none;
}
.pic .top .house .building .decor .decorL {
  margin-left: -65px;
}
.pic .top .house .building .decor .decorR {
  margin-right: -65px;
}
.pic .top .house .building .decor .dec {
  width: 10px;
  height: 25px;
  background-color: #f99380;
  border: 2.5px solid #f28064;
}
.pic .top .house .building:before {
  content: " ";
  width: 200px;
  height: 7px;
  background-color: #e27560;
  display: block;
}
.pic .top .house .window {
  width: 130px;
  height: 270px;
  background-color: none;
  position: absolute;
  left: 35px;
  top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.pic .top .house .window .windowL, .pic .top .house .window .windowR {
  width: 65px;
  height: 270px;
  background-color: none;
  display: flex;
  justify-content: center;
  align-items: space-between;
  flex-direction: column;
}
.pic .top .house .window .windowL .windowlil, .pic .top .house .window .windowR .windowlil {
  width: 65px;
  height: 90px;
  background-color: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.pic .top .house .window .windowL .windowlil .windowframe, .pic .top .house .window .windowR .windowlil .windowframe {
  width: 40px;
  height: 75px;
  background-color: #454344;
  border: solid 4px #f28064;
  margin-top: 5px;
}
.pic .top .house .window .windowL .windowlil .windowbot, .pic .top .house .window .windowR .windowlil .windowbot {
  width: 45px;
  height: 8px;
  background-color: #f28064;
  margin-top: -4px;
  box-shadow: 0px 2px #e27560;
}
.pic .top .house .window .windowL .windowlil .windowtop1, .pic .top .house .window .windowR .windowlil .windowtop1 {
  width: 32px;
  height: 4px;
  background-color: #f2b191;
  position: relative;
  top: 15px;
}
.pic .top .house .window .windowL .windowlil .windowtop2, .pic .top .house .window .windowR .windowlil .windowtop2 {
  width: 3px;
  height: 48px;
  background-color: #f2b191;
  position: relative;
  top: 15px;
  left: 14px;
}

@-webkit-keyframes ani {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(380px);
            transform: translateX(380px);
  }
}

@keyframes ani {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(380px);
            transform: translateX(380px);
  }
}
@-webkit-keyframes ani1 {
  0% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
  100% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}
@keyframes ani1 {
  0% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
  100% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
  }
}
.boat1 {
  -webkit-animation: ani 60s linear infinite alternate;
          animation: ani 60s linear infinite alternate;
}

.boat2 {
  -webkit-animation: ani1 60s linear infinite alternate;
          animation: ani1 60s linear infinite alternate;
}

.moon, .sun {
  width: 70px;
  height: 70px;
  background-color: none;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0;
  left: 140px;
  top: 140px;
}

.moon {
  box-shadow: inset 20px -15px;
  top: -100px;
  opacity: 0;
}

.sun {
  background-color: #ffd071;
  opacity: 1;
  box-shadow: 0 0 20px rgba(255, 208, 113, 0.3);
}

.pic, .sun, .moon, .windowframe, .sea, .reflection {
  transition: 1s;
}

input {
  display: none;
}

input:checked + .pic {
  background-color: #21292b;
}
input:checked + .pic .top .house .window .windowR .windowlil .windowframe {
  background-color: #ffe4b3;
}
input:checked + .pic .top .house .window .windowL .windowlil .windowframe {
  background-color: #ffe4b3;
}
input:checked + .pic .sun {
  top: 500px;
  opacity: 0;
}
input:checked + .pic .moon {
  top: 140px;
  opacity: 1;
}
input:checked + .pic .sea {
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
}
input:checked + .pic .reflection {
  -webkit-filter: brightness(105%);
          filter: brightness(105%);
  -webkit-animation: reflection 1s;
          animation: reflection 1s;
}
input:checked + .pic .allstars {
  opacity: 1;
}
@-webkit-keyframes reflection {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reflection {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.allstars {
  width: 100%;
  height: 100%;
  background-color: none;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
@-webkit-keyframes falling {
  0%,100% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  0% {
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px);
  }
}
@keyframes falling {
  0%,100% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  0% {
    -webkit-transform: translate(100px, 0px);
            transform: translate(100px, 0px);
  }
  100% {
    -webkit-transform: translate(0px, 200px);
            transform: translate(0px, 200px);
  }
}
.allstars [class^='star'] {
  width: 3px;
  height: 3px;
  background-color: 20%;
  background-color: #ffe4b3;
  -webkit-animation: falling 4s infinite;
          animation: falling 4s infinite;
}
.allstars .star1 {
  position: absolute;
  left: 31%;
  top: 45%;
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}
.allstars .star2 {
  position: absolute;
  left: 79%;
  top: -24%;
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.allstars .star3 {
  position: absolute;
  left: 3%;
  top: -3%;
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.allstars .star4 {
  position: absolute;
  left: 65%;
  top: 37%;
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.allstars .star5 {
  position: absolute;
  left: 22%;
  top: 47%;
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.allstars .star6 {
  position: absolute;
  left: 83%;
  top: 28%;
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.allstars .star7 {
  position: absolute;
  left: 58%;
  top: -17%;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.allstars .star8 {
  position: absolute;
  left: 89%;
  top: -16%;
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.allstars .star9 {
  position: absolute;
  left: 72%;
  top: 29%;
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.allstars .star10 {
  position: absolute;
  left: 34%;
  top: 41%;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.allstars .star11 {
  position: absolute;
  left: 1%;
  top: 24%;
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.allstars .star12 {
  position: absolute;
  left: 43%;
  top: 1%;
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.allstars .star13 {
  position: absolute;
  left: 51%;
  top: 19%;
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}
.allstars .star14 {
  position: absolute;
  left: 97%;
  top: 26%;
  -webkit-animation-delay: -1.4s;
          animation-delay: -1.4s;
}
.allstars .star15 {
  position: absolute;
  left: 93%;
  top: 26%;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
.allstars .star16 {
  position: absolute;
  left: 13%;
  top: -2%;
  -webkit-animation-delay: -1.6s;
          animation-delay: -1.6s;
}
.allstars .star17 {
  position: absolute;
  left: 90%;
  top: -2%;
  -webkit-animation-delay: -1.7s;
          animation-delay: -1.7s;
}
.allstars .star18 {
  position: absolute;
  left: 37%;
  top: 20%;
  -webkit-animation-delay: -1.8s;
          animation-delay: -1.8s;
}
.allstars .star19 {
  position: absolute;
  left: 54%;
  top: 0%;
  -webkit-animation-delay: -1.9s;
          animation-delay: -1.9s;
}
.allstars .star20 {
  position: absolute;
  left: 92%;
  top: 33%;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
.allstars .star21 {
  position: absolute;
  left: 27%;
  top: -24%;
  -webkit-animation-delay: -2.1s;
          animation-delay: -2.1s;
}
.allstars .star22 {
  position: absolute;
  left: 70%;
  top: -18%;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}
.allstars .star23 {
  position: absolute;
  left: 52%;
  top: 39%;
  -webkit-animation-delay: -2.3s;
          animation-delay: -2.3s;
}
.allstars .star24 {
  position: absolute;
  left: 74%;
  top: -6%;
  -webkit-animation-delay: -2.4s;
          animation-delay: -2.4s;
}
.allstars .star25 {
  position: absolute;
  left: 53%;
  top: 20%;
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
.allstars .star26 {
  position: absolute;
  left: 65%;
  top: 11%;
  -webkit-animation-delay: -2.6s;
          animation-delay: -2.6s;
}
.allstars .star27 {
  position: absolute;
  left: 52%;
  top: 27%;
  -webkit-animation-delay: -2.7s;
          animation-delay: -2.7s;
}
.allstars .star28 {
  position: absolute;
  left: 43%;
  top: 29%;
  -webkit-animation-delay: -2.8s;
          animation-delay: -2.8s;
}
.allstars .star29 {
  position: absolute;
  left: 40%;
  top: 21%;
  -webkit-animation-delay: -2.9s;
          animation-delay: -2.9s;
}
.allstars .star30 {
  position: absolute;
  left: 29%;
  top: -1%;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}






.liebiao{
  width: 80%;
  background-color: white;
  margin-top: 32%;
  z-index: 3;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.item{
  display: flex;
  flex-direction: row;
}
.facebox{
  width: 400px;
  height: 260px;
  margin: 20px;
  overflow: hidden;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
}
.biaoti{
  margin: 20px;
  font-size: 4em;
  font-weight: 300;
  color: #333;
}